@import url('content_styles.css');

* { margin: 0; padding: 0; }

body { background-color: silver; font-size: 14px; font-family: Verdana, Arial; margin: 0; padding: 0; }

#top_meta_informations { background-color: #322f32; color: white; box-shadow: 0px 5px 5px 2px #322f32; margin-bottom: 10px; font-size: 0.8em; position: fixed; z-index: 1; width: 100%; left: 0; top: 0; }
#top_meta_informations div.left { float: left; padding: 5px 4px 3px 4px; }
#top_meta_informations div.right { float: right; padding: 5px 4px 3px 4px; }
#top_meta_informations div.clear { clear: both; }
#top_meta_informations a, #active_course_id { text-decoration: none; color: #00cc00; transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; }
#top_meta_informations a:hover, #active_course_id:hover { color: #B6FBA6; }
#active_course_id { cursor: pointer; }

#mainwrap { min-width: 900px; max-width: 1200px; margin: 0 auto; margin-top: 50px; text-align: center; background-color: white; border: 1px solid black; border-radius: 4px; box-shadow: 0px 0px 50px 20px gray; }
#footer { min-width: 900px; max-width: 1200px; margin: 0 auto; margin-top: 20px; text-align: center; background-color: white; border: 1px solid black; border-radius: 4px; box-shadow: 0px 0px 50px 20px gray; }
#footer span { margin: 5px; display: inline-block; }
#loginboxwrap { text-align: left; }
#registrationboxwrap { padding: 20px; }
#leftwrap { text-align: left; float: left; width: 200px; }
#leftwrap > div.internal_padding { padding: 3px; }
#leftwrap > div.title { margin:0; padding: 3px; background-color: #444444; color: white; border-top-left-radius: 3px; border-top-right-radius: 3px; text-align: center; }
#leftwrap > div.title h4 { margin: 0; padding: 0; }
#rightwrap { text-align: left; margin-left: 205px; min-height: 500px; }
#rightwrap > div.internal_padding { padding: 5px; }
#rightwrap > div.internal_padding > h1 { margin: 0; padding: 0; }

#rightwrap > div.internal_padding > fieldset, fieldset.basefieldset { background-color: #f0f0f0; border: 1px solid black; border-radius: 10px; padding: 10px; margin: 4px 0; box-shadow: 3px 3px 6px gray; }
#rightwrap > div.internal_padding > fieldset > legend, fieldset.basefieldset > legend { background-color: #f0f0f0; border: 1px solid black; min-width: 50%; padding: 3px 10px; border-radius: 50px; font-weight: bold; }
#rightwrap > div.internal_padding > h1 { margin-bottom: 10px; text-shadow: 2px 2px 2px silver; }

#pagemenu, #pagemenu ul, #pagemenu ul li { margin: 0; padding: 0; }
#pagemenu, 
#pagemenu > li > ul, 
#pagemenu > li > ul > li > ul { list-style-type: none; }
#pagemenu > li, 
#pagemenu > li > ul > li, 
#pagemenu > li > ul > li > ul > li {
    background-color: #222222;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), color-stop(0.5, #111111), to(#222222));
    background: -webkit-linear-gradient(top, #333333, #111111, #222222);
    background: -moz-linear-gradient(top, #333333, #111111, #222222);
    background: -ms-linear-gradient(top, #333333, #111111, #222222);
    background: -o-linear-gradient(top, #333333, #111111, #222222);
    
    border: 1px solid black;
    border-radius: 3px;
}
#pagemenu > li:hover, 
#pagemenu > li > ul > li:hover, 
#pagemenu > li > ul > li > ul > li:hover {
    background-color: #282828;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444444), color-stop(0.5, #141414), to(#282828));
    background: -webkit-linear-gradient(top, #444444, #141414, #282828);
    background: -moz-linear-gradient(top, #444444, #141414, #282828);
    background: -ms-linear-gradient(top, #444444, #141414, #282828);
    background: -o-linear-gradient(top, #444444, #141414, #282828);
}
#pagemenu > li > a, 
#pagemenu > li > ul > li > a, 
#pagemenu > li > ul > li > ul > li > a { padding: 3px 2px; text-decoration: none; display: block; color: #00cc00; }
#pagemenu > li:hover > a, 
#pagemenu > li > ul > li:hover > a, 
#pagemenu > li > ul > li > ul > li:hover > a { color: #00bb00; }
#pagemenu > li.selected, 
#pagemenu > li > ul > li.selected, 
#pagemenu > li > ul > li > ul > li.selected {
    background-color: green;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00cc00), color-stop(0.5, #154400), to(green));
    background: -webkit-linear-gradient(top, #00cc00, #154400, green);
    background: -moz-linear-gradient(top, #00cc00, #154400, green);
    background: -ms-linear-gradient(top, #00cc00, #154400, green);
    background: -o-linear-gradient(top, #00cc00, #154400, green);
}
#pagemenu > li.selected > a, 
#pagemenu > li > ul > li.selected > a, 
#pagemenu > li > ul > li > ul > li.selected > a { color: white; }
#pagemenu > li.selected:hover, 
#pagemenu > li > ul > li.selected:hover, 
#pagemenu > li > ul > li > ul > li.selected:hover {
    background-color: #00bb00;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00ff00), color-stop(0.5, #208800), to(#00bb00));
    background: -webkit-linear-gradient(top, #00ff00, #208800, #00bb00);
    background: -moz-linear-gradient(top, #00ff00, #208800, #00bb00);
    background: -ms-linear-gradient(top, #00ff00, #208800, #00bb00);
    background: -o-linear-gradient(top, #00ff00, #208800, #00bb00);
}

ul.ui-menu li a { color: green !important; }

div.clear { clear: both; }

.button { transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; padding: 4px 10px; border: 1px solid green; border-radius: 30px; background-color: #B6FBA6; color: black; box-shadow: -3px -3px 3px gray inset; text-decoration: none; font-size: 0.9em; }
a.button { padding-top: 3px; display: inline-block; }
.button:hover, .button:focus { border-color: black; background-color: #6DC052; box-shadow: -3px -3px 3px black inset; }
.button:active { border-color: black; box-shadow: 3px 3px 3px black inset; }
.button.delete { background-color: #FF8080; border-color: red; }
.button.delete:hover { background-color: #FF2F2F; }
.button.delete:active { border-color: black; }
.button.special { background-color: #96BFFF; border-color: blue; }
.button.special:hover { background-color: #447DFF; }
.button.special:active { border-color: black; }
input[type=text], input[type=password], textarea, select { border: 1px solid black; background-color: white; color: black; font-family: Verdana, Arial, sans-serif; border-radius: 3px; box-shadow: -3px -3px 3px silver inset; padding: 3px; }
input[type=text]:hover, input[type=password]:hover, textarea:hover, select:hover,
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { box-shadow: 3px 3px 3px silver inset; }

div.loginbox { width: 400px; padding: 5px 0; margin: 0 auto; }
div.loginbox h1 { margin: 0 0 15px 0; text-shadow: 0 0 4px gray; color: black; }

form div.field_login,
form div.buttons_login { margin: 4px 0; clear: both; }
form div.field_login > label { font-weight: bold; width: 175px; display: block; float: left; cursor: pointer; }
form div.field_login p.input { width: 210px; margin-left: 180px; }
form div.field_login p.input input[type=text], form div.field_login p.input input[type=password], form div.field_login p.input textarea { width: 98%; }
form div.field_login p.error { clear: both; width: 99%; }
form div.field_login p.error span.message { padding: 2px; border: 1px solid red; color: red; border-radius: 3px; width: 98%; margin: 2px 0; display: block; background-color: #FFAFAF; }

form div.field,
form div.buttons { margin: 4px 0; clear: both; }
form div.field > label { font-weight: bold; width: 20%; display: block; float: left; cursor: pointer; }
form div.field p.input,
form div.field div.input { width: 80%; margin-left: 20%; }
form div.field p.input input[type=text], form div.field p.input input[type=password], form div.field p.input textarea { width: 98%; }
form div.field p.input textarea { height: 100px; }
form div.field p.input select { max-width: 98%; }
form div.field p.error { width: 80%; margin-left: 20%; } 
form div.field p.error span.message { padding: 2px; border: 1px solid red; color: red; border-radius: 3px; width: 98%; margin: 2px 0; display: block; background-color: #FFAFAF; }
form div.field p.caption { width: 80%; margin-left: 20%; font-size: 0.9em; }
form div.field p.caption > label { font-weight: bold; cursor: pointer; }

div.flash_message { color: blue; margin: 5px; padding: 5px; border: 1px solid blue; background-color: #d0d8ff; border-radius: 5px; box-shadow: 0px 0px 2px 2px blue inset; }
div.flash_message.message_success { border-color: green; box-shadow: 0px 0px 2px 2px green inset; background-color: #ADFF9A; color: green; }
div.flash_message.message_error { border-color: red; box-shadow: 0px 0px 2px 2px red inset; background-color: #FFAFAF; color: red; }

div.text ul { padding-left: 23px; }

div.fancybox-wrap div.fancybox-skin { background-color: #66df66; }

div.overflow { position: relative; overflow: hidden; width: 100%; }
div.overflow div.extend { overflow-x: auto; } 